/*
 * @Author: xiaosihan
 * @Date: 2024-09-18 21:58:41
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-04 15:03:51
 */
import componentPrintEditor from '@/myFabric/ComponentPrintEditor';
import sizePrintLayoutEditor from '@/myFabric/sizePrintLayoutEditor';
import goodsUtils from '@/utils/goodsUtils';
import utils from '@/utils/utils';
import { ArrowLeftOutlined, ArrowRightOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { Button, Form, Input, InputNumber, Radio, Slider, Space, Switch, Tooltip } from "antd";
import { autorun } from 'mobx';
import { useEffect, useRef, useState } from 'react';
import styles from './goodEditor.module.less';
import goodsRenderer from './goodsRenderer';
import closeSVG from "./img/close.svg";
import Mockup from './Mockup/Mockup';

import { clamp, cloneDeep, debounce, divide, get, isEmpty, isNumber } from "lodash";
import { GoodsData } from '#/type';
import { IEvent } from 'fabric/fabric-impl';
import { componentKeyNames } from '../../componentNames';
import utilsServer from '@/api/services/utilsServer';
import EditorTable from '@/pages/components/EditorTable/EditorTable';
import GoodsColors from './GoodsColors/GoodsColors';
import optimizeGlb from '@/utils/optimizeGlb';
import outlineGenerate from '@/utils/outlineGenerate';
interface Iprops {
  goodsData: GoodsData;
}

// 商品底板编辑弹窗
export default function GoodEditorModal(props: Iprops) {
  const goodsData = goodsUtils.tojson(props.goodsData);

  const [state, setState] = useState(0);
  const dom = useRef<HTMLDivElement | null>(null);
  const [form] = Form.useForm();
  const focusDom = useRef<undefined | HTMLElement>(undefined);
  const goodsEditorModalDom = useRef<HTMLDivElement | null>(null);
  const [select, setSelect] = useState("");
  const [size, setSize] = useState("3XS");
  const [sizeComponet, setSizeComponet] = useState(""); // 选中的尺码的打印部位
  const [sizeComponetActiveLeft, setSizeComponetActiveLeft] = useState(0);
  const [sizeComponetActiveTop, setSizeComponetActiveTop] = useState(0);
  const [sizeComponetActiveWidth, setSizeComponetActiveWidth] = useState(0);
  const [sizeComponetActiveHeight, setSizeComponetActiveHeight] = useState(0);
  const [allSizeNames, setAllSizeNames] = useState<Array<string>>([]);

  useEffect(() => {

    //异步数据修复 可能会需要5-10s
    goodsUtils.repair(goodsData).then((goodsData: GoodsData) => {
      setGoodsData(goodsData);
    });

    utils.getAllProperty().then((res) => {
      setAllSizeNames(res.sizes);
    });
  }, [])

  useEffect(() => {
    if (isEmpty(allSizeNames)) return;
    const conf = goodsData.component.find((c: any) => c.key === select);

    if (conf) {
      const { modalSize } = goodsData;
      const { uv_3XS, uv_2XS, uv_XS, uv_S, uv_M, uv_L, uv_XL, uv_2XL, uv_3XL, uv_4XL, uv_5XL, uv_6XL, cameraPosition } = conf;
      let uv_url = uv_3XS || uv_2XS || uv_XS || uv_S || uv_M || uv_L || uv_XL || uv_2XL || uv_3XL || uv_4XL || uv_5XL || uv_6XL;

      switch (modalSize) {
        case "3XS":
          uv_url = conf[allSizeNames[0]] || uv_url;
          break;
        case "2XS":
          uv_url = uv_2XS || uv_url;
          break;
        case "XS":
          uv_url = uv_XS || uv_url;
          break;
        case "S":
          uv_url = uv_S || uv_url;
          break;
        case "M":
          uv_url = uv_M || uv_url;
          break;
        case "L":
          uv_url = uv_L || uv_url;
          break;
        case "XL":
          uv_url = uv_XL || uv_url;
          break;
        case "2XL":
          uv_url = uv_2XL || uv_url;
          break;
        case "3XL":
          uv_url = uv_3XL || uv_url;
          break;
        case "4XL":
          uv_url = uv_4XL || uv_url;
          break;
        case "5XL":
          uv_url = uv_5XL || uv_url;
          break;
        case "6XL":
          uv_url = uv_6XL || uv_url;
          break;
        default:
          break;
      }

      componentPrintEditor.setUv(uv_url);

      componentPrintEditor.setPrintArea({ top: conf.print_area_top });
      componentPrintEditor.setPrintArea({ left: conf.print_area_left });
      componentPrintEditor.setPrintArea({ width: conf.print_area_width });
      componentPrintEditor.setPrintArea({ height: conf.print_area_height });

      componentPrintEditor.setPrintArea({ clip_top: conf.clip_print_area_top });
      componentPrintEditor.setPrintArea({ clip_left: conf.clip_print_area_left });
      componentPrintEditor.setPrintArea({ clip_width: conf.clip_print_area_width });
      componentPrintEditor.setPrintArea({ clip_height: conf.clip_print_area_height });

      goodsRenderer.setStoreName(select, cameraPosition);
    } else {
      componentPrintEditor.setUv("");
    }
  }, [select, props.goodsData, allSizeNames, state]);

  useEffect(() => autorun(() => {
    if (goodsData.modelUrl) {
      goodsRenderer.loadModal(goodsData.modelUrl);
      goodsRenderer.needRender = true;
      setSelect(get(goodsData, ["component", 0, "key"]));
    } else {
      goodsRenderer.clear();
    }
    form.setFieldsValue({
      name: goodsData.name,
      sku: goodsData.sku,
      spu: goodsData.spu,
      modelUrl: goodsData.modelUrl,
      sort: goodsData.sort,
    });
  }, { delay: 10 }), []);

  useEffect(() => {

    (async () => {
      const property = await utils.getAllProperty();

      //补充尺码信息保持数据结构完整
      property.sizes.map(size => {
        if (!goodsData.size.some((s: any) => s.name === size)) {
          goodsData.size.push({ enable: false, lock: false, name: size, width: 1500, height: 1000, printLayout: {} });
        }
      });

      const sizeConfig = goodsData.size.find((s: any) => s.name === size);

      if (sizeConfig) {
        sizePrintLayoutEditor.setWidth(sizeConfig.width);
        sizePrintLayoutEditor.setHeight(sizeConfig.height);
        sizePrintLayoutEditor.setSelection(!sizeConfig.lock);
        sizePrintLayoutEditor.fabricCanvas.clear();

        await new Promise((resolve) => {
          sizePrintLayoutEditor.loadFromJSON(sizeConfig.printLayout, resolve);
        });

        for (let i = 0; i < goodsData.component.length; i++) {
          const c = goodsData.component[i];
          let uv_url: string = "";
          switch (size) {
            case "3XS":
              uv_url = c.uv_3XS;
              break;
            case "2XS":
              uv_url = c.uv_2XS;
              break;
            case "XS":
              uv_url = c.uv_XS;
              break;
            case "S":
              uv_url = c.uv_S;
              break;
            case "M":
              uv_url = c.uv_M;
              break;
            case "L":
              uv_url = c.uv_L;
              break;
            case "XL":
              uv_url = c.uv_XL;
              break;
            case "2XL":
              uv_url = c.uv_2XL;
              break;
            case "3XL":
              uv_url = c.uv_3XL;
              break;
            case "4XL":
              uv_url = c.uv_4XL;
              break;
            case "5XL":
              uv_url = c.uv_5XL;
              break;
            case "6XL":
              uv_url = c.uv_6XL;
              break;
            default:
              break;
          }

          if (uv_url) {
            await sizePrintLayoutEditor.addUv(c.key, uv_url);
          } else {
            sizePrintLayoutEditor.remove(c.key);
          }
        }

        const data = sizePrintLayoutEditor.toJSON();

        sizeConfig.printLayout = data;

      }

    })();


    sizePrintLayoutEditor.fabricCanvas.discardActiveObject();

    const selectObject = async (e: IEvent) => {
      if (e.selected) {
        setSizeComponet("");
        await new Promise(resolve => requestAnimationFrame(resolve));
        const target = e.selected[0]!;
        const conf = goodsData.component.find((c: any) => c.key === target.name)!;
        if (conf) {
          setSizeComponet(conf.name || "");
          setSizeComponetActiveLeft(Math.floor(target.left! - (target.getScaledWidth() / 2)));
          setSizeComponetActiveTop(Math.floor(target.top! - (target.getScaledHeight() / 2)));
          setSizeComponetActiveWidth(Math.floor(target.getScaledWidth()));
          setSizeComponetActiveHeight(Math.floor(target.getScaledHeight()));
        }
      }
    }

    const activeObjectUpdata = async (e: IEvent) => {
      if (e.target) {
        setSizeComponet("");
        await new Promise(resolve => requestAnimationFrame(resolve));
        const conf = goodsData.component.find((c: any) => c.key === e.target!.name)!;
        if (conf) {
          setSizeComponet(conf.name || "");
          setSizeComponetActiveLeft(Math.floor(e.target.left! - (e.target.getScaledWidth() / 2)));
          setSizeComponetActiveTop(Math.floor(e.target.top! - (e.target.getScaledHeight() / 2)));
          setSizeComponetActiveWidth(Math.floor(e.target.getScaledWidth()));
          setSizeComponetActiveHeight(Math.floor(e.target.getScaledHeight()));
        }
      }
    }

    const objectMove = (e: IEvent) => {

      if (e.target) {
        const width = e.target.getScaledWidth();
        const height = e.target.getScaledHeight();
        const halfWidth = width / 2;
        const halfHeight = height / 2;
        const canvasWidth = sizePrintLayoutEditor.fabricCanvas.getWidth();
        const canvasHeight = sizePrintLayoutEditor.fabricCanvas.getHeight();

        if (e.target.type === "activeSelection") {
          e.target.left = clamp(e.target.left!, 0, canvasWidth - width);
          e.target.top = clamp(e.target.top!, 0, canvasHeight - height);
        } else {
          e.target.left = clamp(e.target.left!, halfWidth, canvasWidth - halfWidth);
          e.target.top = clamp(e.target.top!, halfHeight, canvasHeight - halfHeight);
        }
      }
    }

    const clearedSelection = () => {
      setSizeComponet("");
    }

    const afterRender = debounce(() => {
      (goodsData.size || []).map(sizeConfig => {
        if (sizeConfig.name === size) {
          const data = sizePrintLayoutEditor.toJSON();
          if (data.objects.length) {
            sizeConfig.printLayout = data;
          }
        }
      });
      setGoodsData({ size: goodsData.size }, false);
    }, 30);

    sizePrintLayoutEditor.fabricCanvas.off("selection:created", selectObject);
    sizePrintLayoutEditor.fabricCanvas.off("selection:updated", selectObject);
    sizePrintLayoutEditor.fabricCanvas.off("selection:cleared", clearedSelection);
    sizePrintLayoutEditor.fabricCanvas.off("object:modified", activeObjectUpdata);
    sizePrintLayoutEditor.fabricCanvas.off("object:moving", objectMove);
    sizePrintLayoutEditor.fabricCanvas.off("after:render", afterRender);

    sizePrintLayoutEditor.fabricCanvas.on("selection:created", selectObject);
    sizePrintLayoutEditor.fabricCanvas.on("selection:updated", selectObject);
    sizePrintLayoutEditor.fabricCanvas.on("selection:cleared", clearedSelection);
    sizePrintLayoutEditor.fabricCanvas.on("object:modified", activeObjectUpdata);
    sizePrintLayoutEditor.fabricCanvas.on("object:moving", objectMove);
    sizePrintLayoutEditor.fabricCanvas.on("after:render", afterRender);

    return () => {
      sizePrintLayoutEditor.fabricCanvas.off("selection:created", selectObject);
      sizePrintLayoutEditor.fabricCanvas.off("selection:updated", selectObject);
      sizePrintLayoutEditor.fabricCanvas.off("selection:cleared", clearedSelection);
      sizePrintLayoutEditor.fabricCanvas.off("object:modified", activeObjectUpdata);
      sizePrintLayoutEditor.fabricCanvas.off("object:moving", objectMove);
      sizePrintLayoutEditor.fabricCanvas.off("after:render", afterRender);
    }

  }, [props.goodsData, select, size, state]);

  // 设置修改后的模型
  const setGoodsData = (goodsData: Partial<GoodsData>, needRender = true) => {
    Object.assign(props.goodsData, {
      ...goodsUtils.toString(goodsData as GoodsData)
    });
    if (needRender) {
      setState(performance.now());
    }
  }

  // 上传模型到oss
  const upModal = async () => {
    const file = await utils.selectFile(".glb");
    if (file) {
      // 优化一个 不压缩的glb给微信小程序用的
      const miniGlb = await optimizeGlb.optimize(file);
      const miniProgramModelUrl = await utilsServer.uploadOss(miniGlb);

      const url = await utilsServer.uploadOss(file);

      if (url) {

        form.setFieldsValue({
          modelUrl: url
        });

        await goodsRenderer.loadModal(url);

        const originComponent = cloneDeep(goodsData.component);

        goodsData.component = [];

        await goodsRenderer.frontCloth.traverseMesh(mesh => {

          if (componentKeyNames.some(sort => sort.key.replaceAll("_", "") === mesh.name.replaceAll("_", ""))) {

            const originC = originComponent.find(c => c.key === mesh.name);
            goodsData.component.push(originC || {
              key: mesh.name,
              name: componentKeyNames.find(sort => sort.key === mesh.name)!.name, // 部位的名称
              icon: "", // 图标
              hover_icon: "", //鼠标移入的图标
              enable: true,
              lock: false,
              print_area_top: 0, // 限制打印区域上面
              print_area_left: 0, // 限制打印区域左面
              print_area_width: 200, // 限制打印区域右面
              print_area_height: 265, // 限制打印区域下面

              clip_print_area_top: 0, // 裁剪打印区域上面
              clip_print_area_left: 0, // 裁剪打印区域左面
              clip_print_area_width: 0, // 裁剪打印区域宽度
              clip_print_area_height: 0, // 裁剪打印区域高度

              all_size: "", // 均码尺码轮廓
              uv_3XS: "",
              uv_2XS: "",
              uv_XS: "",
              uv_S: "",
              uv_M: "",
              uv_L: "",
              uv_XL: "",
              uv_2XL: "",
              uv_3XL: "",
              uv_4XL: "",
              uv_5XL: "",
              uv_6XL: "",

              //小程序真机不能加载svg,所以需要提前准备这3张图片
              oulineMark: "", // 用于轮廓裁剪图
              designMark: "", // 用于设计裁剪图
              outlineDash: "", // 轮廓虚线图
              printlineDash: "", // 打印虚线图

            });
          }
        });

        goodsData.component = goodsData.component.sort((a, b) => componentKeyNames.findIndex(s => s.key === a.key) - componentKeyNames.findIndex(s => s.key === b.key));

        setGoodsData({
          modelUrl: url,
          miniProgramModelUrl: miniProgramModelUrl,
          component: goodsData.component
        });

        setSelect(goodsData.component[0].key);
      }
    }
  }

  // 替换模型
  const replaceGlb = async () => {
    const file = await utils.selectFile(".glb");
    if (file) {
      // 优化一个 不压缩的glb给微信小程序用的
      const miniGlb = await optimizeGlb.optimize(file);
      const miniProgramModelUrl = await utilsServer.uploadOss(miniGlb);
      const url = await utilsServer.uploadOss(file);

      if (url) {
        console.log(url, miniProgramModelUrl);

        form.setFieldsValue({
          modelUrl: url
        });

        await goodsRenderer.loadModal(url);
        setGoodsData({ modelUrl: url, miniProgramModelUrl: miniProgramModelUrl });
        setSelect(goodsData.component[0].key);
      }
    }
  }

  // 添加缩略图
  const addThumbs = async (position: number) => {
    const thumbsFile = await utils.selectFile();
    if (thumbsFile) {
      const url = await utilsServer.uploadOss(thumbsFile);
      if (url) {
        goodsData.thumbs.splice(position, 0, url);
      }
      setGoodsData({ thumbs: goodsData.thumbs });
    }
  }

  // 删除缩略图
  const delThumbs = (i: number) => {
    goodsData.thumbs.splice(i, 1);
    setGoodsData({ thumbs: goodsData.thumbs });
  }

  //预览渲染器保存为缩略图
  const saveToThumb = async () => {
    const base64 = goodsRenderer.renderer.domElement.toDataURL('image/png');
    let arr = base64.split(",");
    // let mime = arr[0].match(/:(.\*?);/);
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);

    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    const file = new File([u8arr], `${utils.uuid()}.png`, { type: "image/png" });

    const url = await utilsServer.uploadOss(file);

    if (url) {
      goodsData.thumbs.splice(goodsData.thumbs.length, 0, url);
    }
    setGoodsData({ thumbs: goodsData.thumbs });
  }

  // 添加上身效果
  const addMockup = async (position: number) => {
    const mockupFile = await utils.selectFile(".glb");
    if (mockupFile) {

      const url = await utilsServer.uploadOss(mockupFile);

      const miniGlb = await optimizeGlb.optimize(mockupFile);
      const miniProgrammockupUrl = await utilsServer.uploadOss(miniGlb);

      if (url && miniProgrammockupUrl) {
        if (goodsData.mockupUrls) {
          goodsData.mockupUrls.splice(position, 0, url);
          goodsData.miniProgramMockupUrls.splice(position, 0, miniProgrammockupUrl);
        } else {
          goodsData.mockupUrls = [url];
          goodsData.miniProgramMockupUrls = [miniProgrammockupUrl];
        }
      }
      setGoodsData({
        mockupUrls: goodsData.mockupUrls,
        miniProgramMockupUrls: goodsData.miniProgramMockupUrls
      });
    }
  }

  // 删除上身效果
  const delMockup = (i: number) => {
    if (goodsData.mockupUrls) {
      goodsData.mockupUrls.splice(i, 1);
      goodsData.miniProgramMockupUrls.splice(i, 1);
    } else {
      goodsData.mockupUrls = [];
      goodsData.miniProgramMockupUrls = [];
    }
    setGoodsData({
      mockupUrls: goodsData.mockupUrls || [],
      miniProgramMockupUrls: goodsData.miniProgramMockupUrls || [],
    });
  }

  //前移部位
  const front_move = (key: string) => {
    const originIndex = goodsData.component.findIndex(c => (c.key === key));
    goodsData.component.splice(originIndex - 1, 0, ...goodsData.component.splice(originIndex, 1))
    setGoodsData({ component: goodsData.component });
  }

  //后移部位
  const back_move = (key: string) => {
    const originIndex = goodsData.component.findIndex(c => (c.key === key));
    goodsData.component.splice(originIndex + 1, 0, ...goodsData.component.splice(originIndex, 1))
    setGoodsData({ component: goodsData.component });
  }

  // 给某个部位上传指定尺码的轮廓图
  const uploadOutlineMap = async (componentKey: string, size: string) => {
    const blob = await utils.selectFileToBlob(".svg");
    if (blob) {
      const svgFile = await new Promise<File>((resolve) => {
        fetch(blob)
          .then(response => response.text())
          .then(svgData => {
            // 在这里对 SVG 数据进行处理和修改 修改其中的文本变成对应的尺码文本

            //  svg 有2种情况 width="xxxxmm" 这是cdr导出的
            //  仅有viewBox="0 0 100 100" 这是ai导出的
            //  这里的代码主要是修改svg里面的宽高,以对应150dpi的尺寸
            let modifiedSvgData = "";

            if (svgData.match(/width=\"\d+(\.\d+)?mm\"/)) {
              modifiedSvgData = svgData.replace(/(width|height)="(\d+(\.\d+)?)mm\"/g, (match, p1, p2) => {
                const newValue = Math.floor(p2 * 0.5 * 5.9059);
                return `${p1}="${newValue}"`;
              });
            } else if (svgData.match(/(width|height)="(\d+(\.\d+)?)\"/)) { // 有width,height 就不追加width,height属性了
              modifiedSvgData = svgData.replace(/viewBox=\"0 0 (\d+[\.|\d]+?) (\d+[\.|\d]+?)\"/, 'viewBox="0 0 $1 $2"');
            } else {
              modifiedSvgData = svgData.replace(/viewBox=\"0 0 (\d+[\.|\d]+?) (\d+[\.|\d]+?)\"/, 'viewBox="0 0 $1 $2" width="$1" height="$2"');
            }

            // 使用修改后的 SVG 内容创建 Blob 对象
            const modifiedBlob = new Blob([modifiedSvgData], { type: 'image/svg+xml' });

            // 创建新的 File 对象。如果需要指定文件名，您可以将它作为第三个参数传递给 File 构造函数。
            const modifiedFile = new File([modifiedBlob], "uv.svg", { type: 'image/svg+xml' });

            resolve(modifiedFile);
          })
      });

      const url = await utilsServer.uploadOss(svgFile);

      if (url) {
        const { } = goodsData;
        for (let c of goodsData.component) {
          if (c.key === componentKey) {
            c[`uv_${size}`] = url;
            // 删除裁剪图,在保存时会重新生成新图
            c.oulineMark = "";
            c.designMark = "";
            c.outlineDash = "";
            c.printlineDash = "";
          }
        }
        setGoodsData({ component: goodsData.component });
      }
    }
  }

  //删除轮廓图
  const removeOutlineMap = (componentKey: string, size: string) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c[`uv_${size}`] = "";
        // 删除裁剪图,在保存时会重新生成新图
        c.oulineMark = "";
        c.designMark = "";
        c.outlineDash = "";
        c.printlineDash = "";
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  //为当前部位获取相机的观察位置
  const getCameraPosition = (componentKey: string) => {
    const { position } = goodsRenderer.getLookAt();
    const { x, y, z } = position;
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.cameraPosition = { x, y, z };
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  // 删除相机的位置
  const delCameraPosition = (componentKey: string) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.cameraPosition = undefined;
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  //设置部位的启用状 态
  const setComponentEnable = (componentKey: string, enable: boolean) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.enable = enable;
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  //设置部位的锁定状态启用状态
  const setComponentLock = (componentKey: string, lock: boolean) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.lock = lock;
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  //设置部位名称
  const setComponentName = (componentKey: string, name: string) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.name = name;
      }
    });
  }

  //修改部位名称
  const modifyComponentName = (componentKey: string, name: string) => {
    (goodsData.component || []).map(c => {
      if (c.key === componentKey) {
        c.name = name;
      }
    });
    setGoodsData({ component: goodsData.component });
  }

  //修改部位的图标
  const modifyComponentIcon = async (componentKey: string) => {
    const iconFile = await utils.selectFile(".jpg,.jpeg,.png,.tga,.webp,.svg");
    if (iconFile) {
      const url = await utilsServer.uploadOss(iconFile);
      if (url) {
        (goodsData.component || []).map(c => {
          if (c.key === componentKey) {
            c.icon = url;
          }
        });
        setGoodsData({ component: goodsData.component });
        return url;
      }
    }
  }

  //修改部位的hover图标
  const modifyComponentHoverIcon = async (componentKey: string) => {
    const iconFile = await utils.selectFile(".jpg,.jpeg,.png,.tga,.webp,.svg");
    if (iconFile) {
      const url = await utilsServer.uploadOss(iconFile);
      if (url) {
        (goodsData.component || []).map(c => {
          if (c.key === componentKey) {
            c.hover_icon = url;
          }
        });
        setGoodsData({ component: goodsData.component });
        return url;
      }
    }
  }

  // 防抖修复轮廓图
  const repair = debounce(async () => {
    const newGoodsData = await goodsUtils.repair(goodsData);
    setGoodsData(newGoodsData);
  }, 500);

  //修改打印区域
  const modifyPrintArea = (position: "top" | "left" | "width" | "height", value: number) => {
    componentPrintEditor.setPrintArea({ [position]: value });
    goodsData.component.find(c => {
      if (c.key === select) {
        if (position === "top") {
          c.print_area_top = value;
        } else if (position === "left") {
          c.print_area_left = value;
        } else if (position === "width") {
          c.print_area_width = value;
        } else if (position === "height") {
          c.print_area_height = value;
        }
        // 删除虚线轮廓图,在保存时会重新生成新图
        c.oulineMark = "";
        c.designMark = "";
        c.outlineDash = "";
        c.printlineDash = "";
      }
    });

    //防抖修复轮廓图;
    repair();

  }

  // 修改打印尺寸 200mm*265mm(横版) 或者 280mm*350mm(竖版)
  const modifyPrintSize = async (e: any) => {
    const value = e.target.value;
    switch (value) {
      case 200:
        componentPrintEditor.setPrintArea({ width: 200, height: 265 });
        goodsData.component.find(c => {
          c.print_area_width = 200;
          c.print_area_height = 265;
          // 删除裁剪图,在保存时会重新生成新图
          c.oulineMark = "";
          c.designMark = "";
          c.outlineDash = "";
          c.printlineDash = "";
        });
        goodsData.fillType = 1;
        break;

      case 280:
        componentPrintEditor.setPrintArea({ width: 280, height: 350 });
        goodsData.component.find(c => {
          c.print_area_width = 280;
          c.print_area_height = 350;
          // 删除裁剪图,在保存时会重新生成新图
          c.oulineMark = "";
          c.designMark = "";
          c.outlineDash = "";
          c.printlineDash = "";
        });
        goodsData.fillType = 1;
        break;

      case 99999:
        componentPrintEditor.setPrintArea({ width: 99999, height: 99999 });
        goodsData.component.find(c => {
          c.print_area_left = 0;
          c.print_area_top = 0;
          c.print_area_width = 99999;
          c.print_area_height = 99999;
          // 删除裁剪图,在保存时会重新生成新图
          c.oulineMark = "";
          c.designMark = "";
          c.outlineDash = "";
          c.printlineDash = "";
        });
        goodsData.fillType = 0;
        break;

      default:
        break;
    }

    await goodsUtils.repair(goodsData);

    setGoodsData({ component: goodsData.component }, true);
  }

  // 修改裁剪打印区域
  const modifyClipPrintArea = (position: "clip_top" | "clip_left" | "clip_width" | "clip_height", value: number) => {
    componentPrintEditor.setPrintArea({ [position]: value });
    goodsData.component.find(c => {
      if (c.key === select) {
        if (position === "clip_top") {
          c.clip_print_area_top = value;
        } else if (position === "clip_left") {
          c.clip_print_area_left = value;
        } else if (position === "clip_width") {
          c.clip_print_area_width = value;
        } else if (position === "clip_height") {
          c.clip_print_area_height = value;
        }
        // 删除裁剪图,在保存时会重新生成新图
        c.oulineMark = "";
        c.designMark = "";
        c.outlineDash = "";
        c.printlineDash = "";
      }
    });

    //防抖修复轮廓图;
    repair();
  }

  // 设置尺码的开启和关闭
  const setSizeEnable = (size: string, enable: boolean) => {
    (goodsData.size || []).map(c => {
      if (c.name === size) {
        c.enable = enable;
      }
    });
    setGoodsData({ size: goodsData.size });
  }

  // 设置尺码的锁定状态
  const setSizeLock = (size: string, lock: boolean) => {
    (goodsData.size || []).map(c => {
      if (c.name === size) {
        c.lock = lock;
        sizePrintLayoutEditor.setSelection(!c.lock);
      }
    });
    setGoodsData({ size: goodsData.size });
  }

  //修改排版区域的尺寸
  const modifyLayoutSize = (sizeName: string, size: "width" | "height", value: number) => {
    (goodsData.size || []).map(c => {
      if (c.name === sizeName) {
        c[size] = value;
      }
    });

    if (size === "width") {
      sizePrintLayoutEditor.setWidth(value);
    } else if (size === "height") {
      sizePrintLayoutEditor.setHeight(value);
    }
  }

  // 修改商品颜色
  const modifyColor = debounce((colors: GoodsData["colors"]) => {
    goodsData.colors = colors
    setGoodsData({ colors: goodsData.colors });
  }, 500);

  // 设置成模型的尺码
  const setModalSize = (size: string) => {
    setGoodsData({ modalSize: size });
  }

  // 下载打印排版
  const downPrint = () => {
    sizePrintLayoutEditor.downPrint(goodsData, size, {}, goodsData.name);
  }

  // oulineMark: string; // 用于轮廓裁剪图
  // designMark: string; // 用于设计裁剪图
  // outlineDash: string; // 轮廓虚线图


  return (
    <div ref={dom} className={styles.goodsEditorModal} >
      <div
        ref={goodsEditorModalDom}
      >
        {/* 左边的信息栏 */}
        <div className={styles.left_info} >
          <Form
            form={form}
            layout="inline"
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 22 }}
            style={{
              display: 'inline-block',
              width: 'calc(100% - 412px)',
              minHeight: 436,
            }}
            initialValues={{}}
            onFinish={() => { }}
            onFinishFailed={() => { }}
            autoComplete="off"
          >
            {/* <Form.Item
              label="商品名称"
              name="name"
              rules={[
                { required: true, message: '必须输入商品名称!' }
              ]}
            >
              <Input
                placeholder="必须输入商品名称"
                onChange={e => {
                  props.goodsData.name = e.target.value;
                }}
              />
            </Form.Item> */}

            <Form.Item
              label="商品sku"
              name="sku"
              rules={[
                // { required: true, message: '必须输入商品sku!' }
              ]}
            >
              <Input
                placeholder="商品sku"
                onChange={e => {
                  goodsData.sku = e.target.value;
                }}
              />
            </Form.Item>

            <Form.Item
              label="商品spu"
              name="spu"
              rules={[
                // { required: true, message: '必须输入商品sku!' }
              ]}
            >
              <Input
                placeholder="商品spu"
                onChange={e => {
                  goodsData.sku = e.target.value;
                }}
              />
            </Form.Item>

            <Form.Item<any>
              label="排序"
              name="sort"
              required
            >
              <InputNumber
                style={{ width: '100%' }}
                onChange={(v) => {
                  if (isNumber(v)) {
                    goodsData.sort = v;
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="商品模型"
              name="modelUrl"
              rules={[
                // { required: !goodsData.modelUrl, message: '必须选一个衣服模型!' }
              ]}
            >
              <Space.Compact style={{ width: '100%', marginTop: 8 }}>
                <Input disabled placeholder="模型地址" value={goodsData.modelUrl} />
                <Button
                  type="primary"
                  onClick={() => upModal()}
                >  选择模型{goodsData.modelUrl ? "并重置数据" : ""}  </Button>
                {
                  goodsData.modelUrl &&
                  <Button
                    type="primary"
                    onClick={() => replaceGlb()}
                  >仅替换模型文件</Button>
                }
                {
                  goodsData.modelUrl &&
                  <Button
                    type="primary"
                    onClick={() => utils.download(goodsData.modelUrl)}
                  >下载模型</Button>
                }
              </Space.Compact>
            </Form.Item>

            <div>

              <div>商品缩略图:</div>
              <div className={styles.thumbs_list} >
                {
                  (goodsData.thumbs || []).map((url, i) => {
                    return (
                      <span
                        key={i}
                        className={styles.thumbs_item}
                      >
                        <button
                          onClick={() => {
                            addThumbs(i);
                          }}
                        >+</button>
                        <img className={styles.thumbs} src={utils.ossSuffix(url, 100)} alt="" />
                        <img
                          alt=""
                          onClick={() => {
                            delThumbs(i);
                          }}
                          className={styles.close}
                          src={closeSVG}
                        />

                      </span>
                    );
                  })
                }
                <button
                  onClick={() => {
                    addThumbs(goodsData.thumbs.length);
                  }}
                >+</button>
              </div>
              <br />

            </div>


            <div className={styles.mockup_list} >
              <div className={styles.mockupTitle}>
                上身效果
              </div>
              {
                (goodsData.mockupUrls || []).map((mockup_url, i) => {


                  return (
                    <span
                      key={i}
                      className={styles.mockup_item}
                    >
                      <button
                        onClick={() => {
                          addMockup(i);
                        }}
                      >+</button>
                      <Mockup mockup_url={mockup_url} />
                      <img
                        alt=""
                        onClick={() => {
                          delMockup(i);
                        }}
                        className={styles.close}
                        src={closeSVG}
                      />
                      <VerticalAlignBottomOutlined
                        className={styles.down_mockup}
                        onClick={() => utils.download(mockup_url)}
                      />
                    </span>
                  );
                })
              }
              <button
                onClick={() => {
                  addMockup(get(goodsData, ['mockupUrls', 'length']) || 0);
                }}
              >+</button>
            </div>
            <br />

          </Form>

          {/* 右边模型预览 */}

          <div className={styles.modal_preview}  >
            <div className={styles.render_container} ref={dom => goodsRenderer.setContainer(dom)}>
            </div>
            <Button
              type="primary"
              className={styles.resetBtn}
              onClick={() => goodsRenderer.setDefaultLookAt()}
            >
              重置视角
            </Button>
            &nbsp;
            <Button
              type="primary"
              className={styles.saveToThumb}
              onClick={() => saveToThumb()}
            >存为缩略图</Button>
          </div>


          <div className={styles.component_list} >
            <div> 部位: <Radio.Group
              options={
                (goodsData.component || []).map((c, i) => {
                  return {
                    value: c.key,
                    label: <span>
                      {i > 0 && <ArrowLeftOutlined onClick={() => front_move(c.key)} />}
                      {`${c.key} ${c.name ? `(${c.name})` : ''}`}
                      {i < ((goodsData.component || []).length - 1) && <ArrowRightOutlined onClick={() => back_move(c.key)} />}
                    </span>

                  }
                })
              }
              onChange={(e) => {
                if (e.target.value) {
                  setSelect(e.target.value);
                } else {
                  // add
                }
              }}
              value={select}
              optionType="button"
              buttonStyle="solid"
            />
            </div>
            <div
              className={styles.component_info}
            >
              <div className={styles.component_left}>
                <div
                  ref={dom => componentPrintEditor.setContainer(dom)}
                  className={styles.component_print_aear}
                >
                </div>
              </div>

              <div
                className={styles.component_print_data}
              >
                <Switch
                  disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                  checked={(goodsData.component.find(c => c.key === select) || {}).enable}
                  checkedChildren="可设计"
                  unCheckedChildren="不可设计"
                  onChange={enable => {
                    setComponentEnable(select, enable);
                  }}
                />
                &nbsp;
                <Switch
                  checked={(goodsData.component.find(c => c.key === select) || {}).lock}
                  checkedChildren="锁定"
                  unCheckedChildren="解锁"
                  onChange={lock => {
                    setComponentLock(select, lock);
                  }}
                />
                &nbsp;
                {
                  (goodsData.component.find(c => c.key === select) || {}).icon
                    ?
                    <img
                      alt="图标"
                      className={styles.icon}
                      onClick={async e => {
                        const lock = (goodsData.component.find(c => c.key === select) || {}).lock;
                        if (!lock) {
                          const src = await modifyComponentIcon(select);
                          if (src) {
                            (e.target as HTMLImageElement).src = src;
                          }
                        }
                      }}
                      src={(goodsData.component.find(c => c.key === select) || {}).icon}
                    />
                    :
                    <Button
                      type="primary"
                      onClick={() => modifyComponentIcon(select)}
                    >请上传图标</Button>
                }
                &nbsp;
                {
                  (goodsData.component.find(c => c.key === select) || {}).hover_icon
                    ?
                    <img
                      alt="hovedr图标"
                      className={styles.icon}
                      onClick={async e => {
                        const lock = (goodsData.component.find(c => c.key === select) || {}).lock;
                        if (!lock) {
                          const src = await modifyComponentHoverIcon(select);
                          if (src) {
                            (e.target as HTMLImageElement).src = src;
                          }
                        }
                      }}
                      src={(goodsData.component.find(c => c.key === select) || {}).hover_icon}
                    />
                    :
                    <Button
                      type="primary"
                      onClick={() => modifyComponentHoverIcon(select)}
                    >请上传hover图标</Button>
                }

                <Space.Compact style={{ width: '100%', marginTop: 8 }}>
                  <Input
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    key={(goodsData.component.find(c => c.key === select) || {}).name}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).name}
                    addonBefore="名&nbsp;&nbsp;称:"
                    placeholder="请输入部位名称"
                    onChange={e => {
                      setComponentName(select, e.target.value);
                    }}
                    onBlur={(e) => {
                      modifyComponentName(select, e.target.value);
                    }}
                  />
                </Space.Compact>

                {/* cameraPosition */}
                <Space.Compact style={{ width: '100%', marginTop: 8 }} size="small">
                  <Input
                    readOnly
                    value={
                      (goodsData.component.find(c => c.key === select) || {}).cameraPosition
                        ?
                        JSON.stringify((goodsData.component.find(c => c.key === select) || {}).cameraPosition!)
                        :
                        ""
                    }
                    addonBefore="相机观察位置"
                    placeholder="请记录相机观察位置"
                  />
                  <Button
                    style={{ width: 140 }}
                    disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                    type="primary"
                    onClick={() => getCameraPosition(select)}
                  >
                    记录相机观察位置
                  </Button>
                  <Button
                    disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                    danger
                    type="primary"
                    onClick={() => delCameraPosition(select)}
                  >
                    删除
                  </Button>
                </Space.Compact>

                {
                  allSizeNames.map((sizeName, i) => {
                    const component = goodsData.component.find(c => c.key === select) || {} as any;
                    return (
                      <Space.Compact style={{ width: '100%', marginTop: 8 }} size="small" key={i}>
                        <Input
                          readOnly
                          value={component[sizeName] || component[`uv_${sizeName}`]}
                          addonBefore={`${sizeName}轮廓图:`}
                          placeholder={`请选择${sizeName}轮廓图`}
                        />
                        <Button
                          style={{ width: 140 }}
                          disabled={component.lock}
                          type="primary"
                          onClick={() => uploadOutlineMap(select, sizeName)}
                        >选择{sizeName}轮廓图</Button>
                        <Button
                          disabled={component.lock}
                          danger
                          type="primary"
                          onClick={() => removeOutlineMap(select, sizeName)}
                        >
                          删除
                        </Button>
                      </Space.Compact>
                    )

                  })
                }

                {/* 打印区域一共粉2个尺寸 200mm*265mm(横版) 和 280mm*350mm(竖版) */}
                <Space.Compact style={{ marginTop: 8 }}>
                  <Button size="small" >印刷方式&nbsp;:&nbsp;</Button>
                  &nbsp;
                  <Radio.Group
                    size="small"
                    onChange={modifyPrintSize}
                    disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                    value={(goodsData.component.find(c => c.key === select) || {}).print_area_width}
                    optionType="button"
                    buttonStyle="solid"
                  >
                    <Radio value={200}>烫画200mm*265mm</Radio>
                    <Radio value={280}>烫画280mm*350mm</Radio>
                    <Radio value={254}>直喷254mm*304.8mm</Radio>
                    <Radio value={406}>局部印406.4mm*457.2mm</Radio>
                    <Radio value={99999}>满版印</Radio>
                  </Radio.Group>
                </Space.Compact>
                <br />
                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).print_area_left}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).print_area_left}
                    addonBefore={
                      <div>
                        打印区域左边距:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '200px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).print_area_left}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).print_area_left}
                          onChange={v => {
                            modifyPrintArea("left", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="打印区域左边距"
                    onChange={e => {
                      modifyPrintArea("left", Number(e.target.value));
                      setGoodsData({ component: goodsData.component });
                    }}
                  />
                </Space.Compact>

                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).print_area_top}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).print_area_top}
                    addonBefore={
                      <div>
                        打印区域上边距:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '220px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).print_area_top}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).print_area_top}
                          onChange={v => {
                            modifyPrintArea("top", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="打印区域上边距"
                    onChange={e => {
                      modifyPrintArea("top", Number(e.target.value));
                      setGoodsData({ component: goodsData.component });
                    }}

                  />
                </Space.Compact>

                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_left || 0}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_left || 0}
                    addonBefore={
                      <div>
                        裁剪区域左边距:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '220px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_left}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_left}
                          onChange={v => {
                            modifyClipPrintArea("clip_left", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="裁剪区域左边距"
                    onChange={e => {
                      modifyClipPrintArea("clip_left", Number(e.target.value));
                      setGoodsData({ component: goodsData.component });
                    }}

                  />
                </Space.Compact>

                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_width || 0}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_width || 0}
                    addonBefore={
                      <div>
                        裁剪区域宽度:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '220px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_width}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_width}
                          onChange={v => {
                            modifyClipPrintArea("clip_width", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="裁剪区域宽度:"
                    onChange={e => {
                      modifyClipPrintArea("clip_width", Number(e.target.value));
                    }}
                  />
                </Space.Compact>

                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_top || 0}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_top || 0}
                    addonBefore={
                      <div>
                        裁剪区域上边距:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '220px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_top}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_top}
                          onChange={v => {
                            modifyClipPrintArea("clip_top", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="裁剪区域上边距"
                    onChange={e => {
                      modifyClipPrintArea("clip_top", Number(e.target.value));
                    }}
                  />
                </Space.Compact>



                <Space.Compact style={{ width: '50%', marginTop: 8 }}>
                  <Input
                    min={0}
                    step={1}
                    key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_height || 0}
                    type="number"
                    readOnly={(goodsData.component.find(c => c.key === select) || {}).lock}
                    defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_height || 0}
                    addonBefore={
                      <div>
                        裁剪区域高度:
                        <Slider
                          min={0}
                          step={1}
                          style={{ width: '220px', display: 'inline-block', verticalAlign: "middle", margin: "8px 5px" }}
                          max={1000}
                          key={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_height}
                          disabled={(goodsData.component.find(c => c.key === select) || {}).lock}
                          defaultValue={(goodsData.component.find(c => c.key === select) || {}).clip_print_area_height}
                          onChange={v => {
                            modifyClipPrintArea("clip_height", v);
                          }}
                          onChangeComplete={v => {
                            setGoodsData({ component: goodsData.component });
                          }}
                        />
                      </div>
                    }
                    addonAfter="mm"
                    placeholder="裁剪区域高度:"
                    onChange={e => {
                      modifyClipPrintArea("clip_height", Number(e.target.value));
                    }}
                  />
                </Space.Compact>

              </div>

            </div>
          </div>

          {/* 商品颜色管理 */}
          <GoodsColors
            frontPrintImg={get(goodsData.component.find(c => c.key === "front"), ["printlineDash"], "")}
            backPrintImg={get(goodsData.component.find(c => c.key === "back"), ["printlineDash"], "")}
            colors={goodsData.colors}
            changed={(colors: GoodsData["colors"]) => {
              modifyColor(colors);
            }}
          />

          <div>
            <div>
              <span>尺寸: </span>
              <Radio.Group
                options={allSizeNames.map(s => ({ value: s, label: s }))}
                onChange={(e) => {
                  setSize(e.target.value);
                  setSizeComponet("");
                }}
                value={size}
                optionType="button"
                buttonStyle="solid"
              />
            </div>
            <div className={styles.print_info} >

              <div className={styles.print_param} >
                <Switch
                  disabled={(goodsData.size.find(c => c.name === size) || {}).lock}
                  checked={(goodsData.size.find(c => c.name === size) || {}).enable}
                  checkedChildren="上架"
                  unCheckedChildren="下架"
                  onChange={enable => {
                    setSizeEnable(size, enable);
                  }}
                />

                <Switch
                  disabled={(goodsData.size.find(c => c.name === size) || {}).lock}
                  checked={goodsData.modalSize === size}
                  checkedChildren="模型尺码"
                  unCheckedChildren="模型尺码"
                  onChange={() => {
                    setModalSize(size);
                  }}
                />

                <Switch
                  checked={(goodsData.size.find(c => c.name === size) || {}).lock}
                  checkedChildren="锁定"
                  unCheckedChildren="解锁"
                  onChange={lock => {
                    setSizeLock(size, lock);
                  }}
                />

                <Button
                  type="primary"
                  onClick={() => downPrint()}
                  style={{ width: 240, marginTop: 8, display: "block" }}
                >下载排版</Button>

                <Space.Compact size="small" style={{ width: 240, marginTop: 8, display: "block" }}>
                  <Input
                    step={10}
                    key={(goodsData.size.find(c => c.name === size) || {}).width}
                    type="number"
                    readOnly={(goodsData.size.find(c => c.name === size) || {}).lock}
                    defaultValue={(goodsData.size.find(c => c.name === size) || { width: 1 }).width}
                    addonBefore="尺码排版宽度:"
                    addonAfter="mm"
                    placeholder="尺码排版宽度"
                    onChange={e => {
                      modifyLayoutSize(size, "width", Number(e.target.value));
                    }}
                    onFocus={(e) => {
                      focusDom.current = e.target;
                      if (goodsEditorModalDom.current) {
                        goodsEditorModalDom.current.style.overflow = "hidden";
                        goodsEditorModalDom.current.style.paddingRight = "2.5px";
                      }
                    }}
                    onBlur={() => {
                      focusDom.current = undefined;
                    }}
                    onMouseEnter={(e) => {
                      if (e.target === focusDom.current) {
                        if (goodsEditorModalDom.current) {
                          goodsEditorModalDom.current.style.overflow = "hidden";
                          goodsEditorModalDom.current.style.paddingRight = "2.5px";
                        }
                      }
                    }}
                    onMouseLeave={() => {
                      if (goodsEditorModalDom.current) {
                        goodsEditorModalDom.current.style.overflow = "auto";
                        goodsEditorModalDom.current.style.paddingRight = "0px";
                      }
                    }}
                  />
                </Space.Compact>

                <Input
                  step={10}
                  style={{ width: 240, marginTop: 8, display: "block" }}
                  key={(goodsData.size.find(c => c.name === size) || {}).height}
                  type="number"
                  readOnly={(goodsData.size.find(c => c.name === size) || {}).lock}
                  defaultValue={(goodsData.size.find(c => c.name === size) || { height: 1 }).height}
                  addonBefore="尺码排版高度:"
                  addonAfter="mm"
                  placeholder="尺码排版高度"
                  onChange={e => {
                    modifyLayoutSize(size, "height", Number(e.target.value));
                  }}
                  onFocus={(e) => {
                    focusDom.current = e.target;
                    if (goodsEditorModalDom.current) {
                      goodsEditorModalDom.current.style.overflow = "hidden";
                      goodsEditorModalDom.current.style.paddingRight = "2.5px";
                    }
                  }}
                  onBlur={() => {
                    focusDom.current = undefined;
                  }}
                  onMouseEnter={(e) => {
                    if (e.target === focusDom.current) {
                      if (goodsEditorModalDom.current) {
                        goodsEditorModalDom.current.style.overflow = "hidden";
                        goodsEditorModalDom.current.style.paddingRight = "2.5px";
                      }
                    }
                  }}
                  onMouseLeave={() => {
                    if (goodsEditorModalDom.current) {
                      goodsEditorModalDom.current.style.overflow = "auto";
                      goodsEditorModalDom.current.style.paddingRight = "0px";
                    }
                  }}
                />

                {
                  sizeComponet && <>
                    <Input
                      key={(goodsData.size.find(c => c.name === size) || {}).name}
                      style={{ width: 240, marginTop: 8, display: "block" }}
                      value={sizeComponet}
                      addonBefore="选中部位:"
                      placeholder="选中部位:"
                    />
                    <Input
                      disabled={(goodsData.size.find(c => c.name === size) || {}).lock}
                      style={{ width: 240, marginTop: 8, display: "block" }}
                      type="number"
                      defaultValue={sizeComponetActiveLeft * 2}
                      addonBefore="左边距:"
                      addonAfter="mm"
                      placeholder="左边距:"
                      onChange={e => {
                        sizePrintLayoutEditor.setActiveObjectData({ left: Number(e.target.value) / 2 });
                      }}
                      onFocus={(e) => {
                        focusDom.current = e.target;
                        if (goodsEditorModalDom.current) {
                          goodsEditorModalDom.current.style.overflow = "hidden";
                          goodsEditorModalDom.current.style.paddingRight = "2.5px";
                        }
                      }}
                      onBlur={() => {
                        focusDom.current = undefined;
                      }}
                      onMouseEnter={(e) => {
                        if (e.target === focusDom.current) {
                          if (goodsEditorModalDom.current) {
                            goodsEditorModalDom.current.style.overflow = "hidden";
                            goodsEditorModalDom.current.style.paddingRight = "2.5px";
                          }
                        }
                      }}
                      onMouseLeave={() => {
                        if (goodsEditorModalDom.current) {
                          goodsEditorModalDom.current.style.overflow = "auto";
                          goodsEditorModalDom.current.style.paddingRight = "0px";
                        }
                      }}
                    />

                    <Input
                      disabled={(goodsData.size.find(c => c.name === size) || {}).lock}
                      style={{ width: 240, marginTop: 8, display: "block" }}
                      type="number"
                      defaultValue={sizeComponetActiveTop * 2}
                      addonBefore="上边距:"
                      addonAfter="mm"
                      placeholder="上边距:"
                      onChange={e => {
                        sizePrintLayoutEditor.setActiveObjectData({ top: Number(e.target.value) / 2 });
                      }}
                      onFocus={(e) => {
                        focusDom.current = e.target;
                        if (goodsEditorModalDom.current) {
                          goodsEditorModalDom.current.style.overflow = "hidden";
                          goodsEditorModalDom.current.style.paddingRight = "2.5px";
                        }
                      }}
                      onBlur={() => {
                        focusDom.current = undefined;
                      }}
                      onMouseEnter={(e) => {
                        if (e.target === focusDom.current) {
                          if (goodsEditorModalDom.current) {
                            goodsEditorModalDom.current.style.overflow = "hidden";
                            goodsEditorModalDom.current.style.paddingRight = "2.5px";
                          }
                        }
                      }}
                      onMouseLeave={() => {
                        if (goodsEditorModalDom.current) {
                          goodsEditorModalDom.current.style.overflow = "auto";
                          goodsEditorModalDom.current.style.paddingRight = "0px";
                        }
                      }}
                    />

                    <Input
                      style={{ width: 240, marginTop: 8, display: "block" }}
                      value={sizeComponetActiveWidth * 2}
                      addonBefore="宽&nbsp;&nbsp;度:"
                      addonAfter="mm"
                      placeholder="宽&nbsp;&nbsp;度:"
                    />

                    <Input
                      style={{ width: 240, marginTop: 8, display: "block" }}
                      // type="number"
                      value={sizeComponetActiveHeight * 2}
                      addonBefore="高&nbsp;&nbsp;度:"
                      addonAfter="mm"
                      placeholder="高&nbsp;&nbsp;度:"
                    />

                    <Button
                      style={{ width: 240, marginTop: 8, display: "block" }} type="primary"
                      onClick={() => {
                        sizePrintLayoutEditor.reverseActiveObject();
                      }}
                    >上下翻转</Button>

                  </>
                }

              </div>

              <div
                className={styles.print_layer}
                ref={dom => sizePrintLayoutEditor.setContainer(dom)}
              >
              </div>

            </div>
          </div>

          {/*
          <div className={styles.sizeInfo} >
            尺码信息:
            <EditorTable
              key={goodsData.id}
              editor={true}
              columns={get(goodsData, ["sizeInfo", "columns"]) || []}
              dataSource={get(goodsData, ["sizeInfo", "dataSource"]) || []}
              onChang={(columns, dataSource) => {
                setGoodsData({ sizeInfo: { columns, dataSource } });
              }}
            />
          </div>
          */}



        </div>
      </div >
    </div>
  );

}


